<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>个人博客</title>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link
	href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700"
	rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface"
	rel="stylesheet">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/user/css/open-iconic-bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/user/css/animate.css">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/user/css/owl.carousel.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/user/css/owl.theme.default.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/user/css/magnific-popup.css">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/user/css/aos.css">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/user/css/ionicons.min.css">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/user/css/bootstrap-datepicker.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/user/css/jquery.timepicker.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/layui/css/layui.css">

<link rel="stylesheet"
	href="${pageContext.request.contextPath}/user/css/flaticon.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/user/css/icomoon.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/user/css/style.css">
</head>
<body>
	<jsp:include page="nav.jsp"></jsp:include>
	<!-- END nav -->

	<div class="hero-wrap js-fullheight"
		style="background-image: url('${pageContext.request.contextPath}/user/images/bg_1.jpg');">
		<div class="overlay"></div>
		<div class="container">
			<div
				class="row no-gutters slider-text js-fullheight align-items-center justify-content-center"
				data-scrollax-parent="true">
				<div class="col-md-9 text-center ftco-animate"
					data-scrollax=" properties: { translateY: '70%' }">
					<p class="breadcrumbs"
						data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">
						<span class="mr-2"><a href="index">主页</a></span> <span>博客</span>
					</p>
					<h1 class="mb-3 bread"
						data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">
						博客</h1>
				</div>
			</div>
		</div>
	</div>

	<section class="ftco-section ftco-degree-bg">
		<div class="container">
			<div class="row">
				<div class="col-md-8 ftco-animate center">
					<h2 class="mb-3">${list[0].btitle}</h2>
					<p>${list[0].bcontent}</p>
					<p>
						<img src="${list[0].bimg}" alt="" class="img-fluid">
					</p>


					<%-- <div class="about-author d-flex p-4 bg-light">
              <div class="bio mr-5">
                <img src="${list[0].bimg}" alt="Image placeholder" class="img-fluid mb-4">
              </div>
              <div class="desc">
                <h3>George Washington</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus itaque, autem necessitatibus voluptate quod mollitia delectus aut, sunt placeat nam vero culpa sapiente consectetur similique, inventore eos fugit cupiditate numquam!</p>
              </div>
            </div> --%>


					<div class="pt-5 mt-5">
						<h3 class="mb-5">评论</h3>
						<ul class="comment-list">

							<c:forEach items="${list}" var="list">

								<li class="comment">
									<div class="vcard bio">
										<img
											src="${pageContext.request.contextPath}/user/images/person_1.jpg"
											alt="Image placeholder">
									</div>
									<div class="comment-body">
										<h3>${list.uname}</h3>
										<!-- <div class="meta">October 03, 2018 at 2:21pm</div> -->
										<p>${list.bccontent}</p>
										
									</div>
								</li>

							</c:forEach>

							<!-- END comment-list -->
							<div class="comment-form-wrap pt-5">
								<h3 class="mb-5">发表评论</h3>
								<form action="#" class="p-5 bg-light">

									<div class="form-group">
										<label for="message">内容</label>
										<textarea name="bccontent"  cols="30" rows="10" id="kdCon"
											class="form-control"></textarea>
									</div>
									<div class="form-group">
										<input type="button" value="发表评论" id="btnIssue"
											class="btn py-3 px-4 btn-primary">
									</div>

								</form>
							</div>
					</div>

				</div>
				<!-- .col-md-8 -->
				<!-- <div class="col-md-4 sidebar ftco-animate">
					<div class="sidebar-box">
						<form action="#" class="search-form">
							<div class="form-group">
							</div>
						</form>
					</div>
					<div class="sidebar-box ftco-animate"></div>

					<div class="sidebar-box ftco-animate"></div>
				</div> -->

				


			</div>

		</div>
		</div>
	</section>
	<!-- .section -->

	<section class="ftco-section-parallax">
		<div class="parallax-img d-flex align-items-center">
			<div class="container">
				<div class="row d-flex justify-content-center">
					
				</div>
			</div>
		</div>
	</section>

	<jsp:include page="footer.jsp"></jsp:include>
	
</body>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<link rel="stylesheet"
		href="${pageContext.request.contextPath}/layui/css/layui.css"
		media="all">
	<script src="${pageContext.request.contextPath}/layui/layui.js"
		charset="utf-8"></script>
<script type="text/javascript">
		 $(function(){
			$("#btnIssue").click(function(){
				layui.use(['laypage','layer' ],function() {
					var laypage = layui.laypage, layer = layui.layer;
				if(${!empty users}){
					if($("#kdCon").val().trim()!=null&&$("#kdCon").val().trim()!=""){
						 if($("#kdCon").val().trim().length<=200){
							 $.ajax({
									type:"post",
									url:"addcomment",
									data:{
										bccontent: $("#kdCon").val(),
										uid:"${users.uid}",   //获取article传过来的kId
										bid:"${list[0].bid}"
									},
									success:function(data) {
										//如果信息是评论成功，就提示信息，重新加载页面
										  if (data.msg == "评论成功") {
											  
											layer.msg(data.msg, {
												icon : 1,
												time : 1000

											}, function() {
												location.reload();
											});
										}  
										
									}
									
								});
						}  else{
							layer.msg("评论长度不能超过200！", {
								icon : 5,
								time : 1000

							});
						}
						
						
					}else{
						layer.msg("评论不能为空！", {
							icon : 5,
							time : 1000

						});
					}
				}else{
					layer.msg("请先登录！", {
						icon : 5,
						time : 1000

					});
			}
			});

			});
		}); 
	
	</script>
</html>
